<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../static/css/templatemo_style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../static/css/flexslider.css" type="text/css" media="screen" />

<style>
body {
    font-family: Arial, sans-serif;
    background-color: #e0ffff;
}

#header {
    text-align: center;
    margin-top: 20px;
}

#login-content, #register {
    width: 400px; /* 调整宽度 */
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* 修改为半透明的黑色背景 */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 调整阴影 */
}

#login-content #body-head, #register #box {
    text-align: center;
}

#login-content #box, #register #box {
    width: 100px;
    height: 50px;
    background-color: #009688; /* 修改为绿色 */
    font-size: 24px;
    line-height: 50px;
    border-radius: 5px;
    margin-bottom: 20px;
}

input[type="text"], input[type="password"], input[type="submit"], input[type="reset"] {
    width: calc(100% - 22px); /* 调整输入框和按钮的宽度 */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    color: #333; /* 修改文字颜色为黑色 */
}

input[type="submit"], input[type="reset"] {
    width: 48%; /* 调整按钮宽度 */
    background-color: #009688; /* 修改为绿色 */
    color: #fff;
    cursor: pointer;
}

input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: #00796b; /* 修改悬停时的颜色 */
}

.error-message {
    color: red;
    text-align: center;
    margin-top: 10px;
}
</style>
</head>
<body class="templatemo_juice_bg">
    <div id="main_container">
        <div class="container" id="home">
            <div class="row col-wrap">
                <div id="left_container" class="col col-md-3 col-sm-12">
                    <div class="templatemo_logo">
                        <a href="#"><img src="../static/images/templatemo_logo.png" alt="Botany Theme"></a>
                    </div>
                    <nav id="main_nav">
                        <ul class="nav">
                            <li class="active"><a href="login.html">登录&注册</a></li>
                        </ul>
                    </nav>
                </div>
                <div id="right_container" class="col col-md-9 col-sm-12">
                    <div class="row">
                        <div class="col col-md-12">
                            <h2>海康天气数据分析平台</h2>
                            <div class="flexslider">
                                <ul class="slides">
                                    <li><img src="../static/images/templatemo_slide_1.jpg" alt="slide 1" /></li>
                                    <li><img src="../static/images/templatemo_slide_2.jpg" alt="slide 2" /></li>
                                    <li><img src="../static/images/templatemo_slide_3.jpg" alt="slide 3" /></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {% if error %}
                    <p class="error-message">{{ error }}</p>
                    {% endif %}
                    <div class="row">
                        <div class="col col-md-12">
                            <div id="login-content">
                                <div id="body-head">
                                    <div id="box">登录</div>
                                    <form action="#" method="post">
                                        <p>账号：<input type="text" name="username"></p>
                                        <p>密码：<input type="password" name="password"></p>
                                        <p><input type="submit" value="登录"> <input type="reset" value="重置"></p>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-md-12">
                            <div id="register">
                                <div id="box">注册</div>
                                <form action="/register" method="post">
                                    <p>账号：<input type="text" name="username"></p>
                                    <p>密码：<input type="password" name="password"></p>
                                    <p><input type="submit" value="注册"> <input type="reset" value="重置"></p>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="slider/jquery.flexslider.js"></script>

<script type="text/javascript">
    $(function(){
        SyntaxHighlighter.all();
    });
    $(window).load(function(){
        $('.flexslider').flexslider({
            animation: "slide",
            start: function(slider){
                $('body').removeClass('loading');
            }
        });
    });
</script>
</body>
</html>
